<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:cc="http://java.sun.com/jsf/composite/cc"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        template="/resources/layout/training-layout.xhtml">

    <ui:define name="head">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </ui:define>
    <ui:define name="toolbar">
        <h:form prependId="false">
            <p:menubar widgetVar="t">
                <c:forEach items="#{venuesController.menu.subMenus}" var="subMenu" varStatus="subMenuStatus">
                    <p:submenu label="#{subMenu.text}">
                        <c:forEach items="#{subMenu.menuItems}" var="menuItem" varStatus="menuItemStatus">
                            <p:menuitem value="#{menuItem.text}"  url="#{menuItem.url}" />
                        </c:forEach>
                    </p:submenu>
                </c:forEach>
            </p:menubar>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <style type="text/css">
            .venue_col1 {width: 60%; vertical-align: top;}
            .venue_col2 {width: 40%; vertical-align: top;}
            .result_panel {width: 100%; height: 100%}
            .map_panel {width: 100%; height: 100%}
        </style>
        <p:growl id="growl" showDetail="true" showSummary="true"/>

        <h:form id="h1" prependId="false">
            <h:panelGrid columns="1" style="width: 100%" cellspacing="1px">
                <p:panel style="width: 100%">
                    <h:panelGrid columns="5" >
                        <h:outputLabel value="#{msgs['fld.search']}" for="a01" />
                        <h:inputText id="a01" value="#{venuesController.searchModel.searchText}" label="#{msgs['fld.search']}"/>
                        <p:message for="a01" display="icon" showDetail="false" showSummary="false"/>
                        <p:commandButton
                            id="b30"
                            ajax="true"
                            value="#{msgs['btn.search']}"
                            update="dg1 as1 growl"
                            actionListener="#{venuesController.searchModel.onSearch}"
                            oncomplete="onSearchComplete(xhr, status, args)"/>
                        <p:ajaxStatus id="as1" style="height:24px;display:block;" widgetVar="statusVar">
                            <f:facet name="start"><h:graphicImage value="../resources/images/loading.gif"/></f:facet>
                            <f:facet name="complete"><h:outputText value=""/></f:facet>
                        </p:ajaxStatus>
                    </h:panelGrid>
                </p:panel>
                <h:panelGrid columns="3" columnClasses="venue_col1,venue_col2" style="width:100%">
                    <p:panel header="#{msgs['dlg.results']}" styleClass="result_panel">
						<p:contextMenu for="dg1">
							<p:menuitem value="View" icon="ui-icon ui-icon-search" action="venuesController.onStartConversation">
								<f:setPropertyActionListener value="#{row}" target="#{venuesController.searchModel.selected}"/>
                                <f:setPropertyActionListener value="false" target="#{coursesController.dataModel.selected.readonly}"/>
							</p:menuitem>
							<p:menuitem value="Delete" action="#{venuesController.onStartConversation}" icon="ui-icon ui-icon-close">
								<f:setPropertyActionListener value="#{row}" target="#{venuesController.searchModel.selected}"/>
                                <f:setPropertyActionListener value="false" target="#{coursesController.dataModel.selected.readonly}"/>
							</p:menuitem>
						</p:contextMenu>
                        <p:dataTable
                            id="dg1"
                            var="row"
                            widgetVar="dg1Var"
							selectionMode="single"
							selection="#{venuesController.searchModel.selected}"
                            value="#{venuesController.searchModel.rows}">
                            <p:column sortBy="#{row.object.formattedAddress}" style="width:80%" headerText="#{msgs['fld.address']}">
                                <h:outputText value="#{row.object.formattedAddress}"/>
                            </p:column>
                            <p:column style="width:80px" headerText="#{msgs['fld.options']}">
                                <p:commandLink actionListener="#{venuesController.onLocationSelect}" value="#{msgs['btn.map']}" update="map01">
                                    <f:setPropertyActionListener value="#{row}" target="#{venuesController.searchModel.selected}"/>
                                </p:commandLink>#{" "}#{" "}
                                <h:commandLink action="#{venuesController.onStartConversation}" immediate="true" value="#{msgs['btn.create.venue']}">
                                    <f:setPropertyActionListener value="#{row}" target="#{venuesController.searchModel.selected}"/>
                                    <f:setPropertyActionListener value="false" target="#{coursesController.dataModel.selected.readonly}"/>
                                </h:commandLink>
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                    <p:panel header="#{msgs['dlg.map']}" styleClass="result_panel">
                        <p:gmap
                                id="map01"
                                binding="#{venuesController.map}"
                                center="#{venuesController.searchModel.selected.object.geometry.location.gps}"
                                zoom="15"
                                type="ROADMAP"
                                style="width:600px;height:400px"
                                rendered="#{venuesController.searchModel.selected ne null}"
                                model="#{venuesController.searchMapModel}" />
                    </p:panel>
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
        <h:form id="h2" prependId="false">
            <p:dialog
                    id="modifyDialog"
                    header="#{msgs['dlg.venue']}"
                    widgetVar="modifyDialogVar"
                    resizable="false"
                    width="500"
                    modal="true"
                    showEffect="explode"
                    hideEffect="explode">
                <p:fieldset legend="#{msgs['pnl.fields']}">
                    <cc:venueForm bean="#{venuesController.dataModel.selected.object}" />
                </p:fieldset>
                <p:fieldset legend="#{msgs['pnl.messages']}">
                    <h:panelGrid id="modify_messages" columns="1">
                        <p:messages id="m1" showDetail="true" showSummary="false" globalOnly="false"  />
                    </h:panelGrid>
                </p:fieldset>
                <h:panelGrid id="modify_buttons" columns="3" cellpadding="4">
                    <p:commandButton
                            id="b1"
                            value="#{msgs['btn.save']}"
                            image="ui-icon ui-icon-disk"
                            actionListener="#{venuesController.dataModel.onSave}"
                            ajax="true"
                            oncomplete="onSaveComplete(xhr, status, args)"
                            update="dt1 modify_display modify_messages"
                            />

                    <p:commandButton
                            id="b4"
                            value="#{msgs['btn.delete']}"
                            image="ui-icon ui-icon-minus"
                            actionListener="#{venuesController.dataModel.onDelete}"
                            ajax="true"
                            rendered="#{venuesController.dataModel.selected.object.id ne null}"
                            oncomplete="onDeleteComplete(xhr, status, args)"
                            update="dt1 modify_display modify_messages"
                            />

                    <p:commandButton
                            id="b3"
                            image="ui-icon ui-icon-close"
                            value="#{msgs['btn.close']}"
                            onclick="modifyDialogVar.hide()"
                            update="dt1 modify_display modify_messages"
                            />
                </h:panelGrid>
            </p:dialog>
        </h:form>
        <script type="text/javascript">
            function onSearchComplete(xhr, status, args) {
                if (args.validationFailed) {
                    return false;
                }

                if (args.result != null) {
                    if (args.result.failed) {
                        return false;
                    }
                }
                return true;
            }

            function onCreateVenue(xhr, status, args) {
                if (args.validationFailed) {
                    return false;
                }

                if (args.result != null) {
                    if (args.result.failed) {
                        return false;
                    }
                }
                modifyDialogVar.show();
                return true;
            }

            function onLookupComplete(xhr, status, args) {
                if (args.validationFailed) {
                    return false;
                }
                if (args.result != null) {
                    if (args.result.failed) {
                        return false;
                    }
                }
                addressDialogVar.show();
                return true;
            }

            function onDeleteComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }

            function onSaveComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }

            function onAddComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }
        </script>
    </ui:define>
</ui:composition>
